<template>
	<view style="background-color: white;">
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="尚图" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view class="product-picture-continer">
			<swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)"
				indicator-active-color="#3688FF" style="height:100vw" interval="5000">
				<swiper-item class="grace-swiper-item" v-for="(item, index) in productDetail.imgs" :key="index">
					<image :src="item.url" mode="widthFix" class="grace-swiper-image" @click="previewImage(item.url)">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 		<view class="grace-product-padding grace-space-between grace-flex-vcenter">
			<text class="grace-product-title grace-bold">{{product.name}}</text>
			<view class="grace-product-share" @tap="share"><text class="grace-icons icon-share3"></text></view>
		</view> -->
		<view class="grace-common-line"></view>
		<view class="produc-info" style="padding: 20rpx;">
			<view class="grace-title">
				<view class="grace-title-border"></view>
				<text class="grace-title-text grace-blue">商品信息</text>
				<text class="grace-icons icon-star grace-product-collect" @click="focusProduct"></text>
				<text class="grace-icons icon-share3 grace-product-share"></text>
			</view>
			<view class="grace-space-between grace-flex-vcenter">
				<view style="width: 50%;">
					<text class="grace-text-small grace-gray">名称：</text>
					<text class="product-name">{{productDetail.productName}}</text>
				</view>
				<view
					style="width: 50%;display: flex;flex-direction: row;justify-content: flex-end;align-items:center;flex-wrap: wrap;">
					<text class="grace-text-small grace-gray">价格：</text>
					<text class="grace-product-price">￥{{productDetail.price}}</text>
				</view>

			</view>
			<view class="grace-space-between grace-flex-vcenter">
				<text class="grace-text-small grace-gray">产地： 南华</text>
				<text class="grace-text-small grace-gray">材质： 纯棉</text>
				<text class="grace-text-small grace-gray">品牌： 耐克</text>
			</view>
		</view>
		<view class="grace-common-line"></view>
		<view class="merchant-info" style="padding: 20rpx;margin-bottom: 100rpx;">
			<view class="grace-title">
				<view class="grace-title-border"></view>
				<text class="grace-title-text grace-blue">商家信息</text>
				<text class="grace-icons"
					style="background-color: #f9ba02;height: 50rpx;width: 90rpx;border-radius: 25rpx;display: flex;justify-content:center;align-items:center;flex-wrap: wrap;margin-right: 20rpx; color: white;"
					@click="toMerchant">进店</text>
			</view>
			<view class="grace-nowrap grace-flex-vcenter">
				<text class="grace-text-small grace-gray">商家名称：</text> <text
					class="merchant-name">{{productDetail.merchant.merchantName}}</text>
				<text class="grace-icons icon-comments grace-form-icon"
					style="font-size: 40rpx;color: #5dade2;margin-inline: 20rpx;" v-on:click="toChat"></text>
			</view>
			<view class="grace-nowrap grace-flex-vcenter" style="margin-top: 20rpx;margin-bottom: 20rpx;">
				<text class="grace-text-small grace-gray">地点： {{productDetail.merchant.address}}</text>
				<text class="grace-icons icon-pathfinding grace-form-icon"
					style="font-size: 40rpx;color: #4bbcfa;margin-inline: 20rpx;"></text>
			</view>
			<view class="grace-nowrap grace-flex-vcenter">
				<text class="grace-text-small grace-gray">电话： <text
						class="merchant-phone grace-blue grace-h5">{{productDetail.merchant.phone}}</text></text>
				<text class="grace-icons icon-tel grace-form-icon"
					style="font-size: 50rpx;color: #58d68d;margin-inline: 20rpx;"></text>
			</view>
			<view class="page-section page-section-gap" style="margin-top: 20rpx;">
				<map style="width: 100%; height: 300rpx;" :latitude="productDetail.merchant.latitude"
					:longitude="productDetail.merchant.longitude" :markers="markers" @click="enterMap">
				</map>
			</view>
		</view>

		<view class="grace-space-between grace-flex-vcenter grace-bg-white footer-buttonv" slot="gFooter">
			<view class="grace-grids grace-nowrap" style="width:250rpx;">
				<view class="grace-grids-items grace-relative" @tap="toIndex">
					<text class="grace-grids-icon grace-icons icon-home"></text>
					<text class="grace-grids-text grace-grids-text">首页</text>
				</view>
				<view class="grace-grids-items grace-relative">
					<image src="../../static/clothes.png" style="width: 50rpx;height: 50rpx;"></image>
					<text class="grace-grids-text grace-grids-text grace-footer-active">搭配</text>
				</view>
			</view>
			<view class="grace-flex-end" style="width:460rpx;">
				<button type="warn" class="grace-footer-button" style="background:#F37B1D;" @tap="toCar">加入购物车</button>
				<button type="warn" class="grace-footer-button" style="background:#E55D52;" @tap="buyNow">立即购买</button>
			</view>
		</view>
		<!-- 属性选择 -->
		<myBottomDialog :show="attrIsShow" @closeDialog="closeAttr">
			<template v-slot:content>
				<view style="min-height: 300rpx;background-color: white;padding: 10rpx;">
					<view style="display: flex;justify-content:left;flex-wrap: wrap;">
						<view style="width: calc(100vw - 80rpx);">
							<image src="../../static/衣服.png"
								style="position: relative;top:-100rpx; width: 200rpx;height: 200rpx;border: #f9ba02 2rpx solid;border-radius: 10rpx;">
							</image>
						</view>
						<text class="grace-icons icon-close" style="font-size: 36rpx; color: #fe2105;"
							@tap="closeAttr"></text>
					</view>
					<view class="types" style="margin-top: -80rpx;margin-left: 20rpx;">
						<view style="margin-bottom: 15rpx;">款式：</view>
						<view :class="type.typeId === order.productTypeId ? 'selected-product-type' : 'product-type'"
							v-for="(type, index) in productTypes" :key="index"
							v-on:click="chooseProductType(type.typeId)" style="">{{type.label}}</view>
					</view>
					<view class="zises"
						style="margin-left: 20rpx;margin-top: 30rpx; display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
						<view style="width:100%;margin-bottom: 15rpx;">尺寸：</view>
						<view :class="item.code === order.productSizeCode ? 'selected-product-size' : 'product-size'"
							v-for="(item, index) in productSizes" :key="index" @click="chooseProductSize(item.code)">
							{{item.label}}
						</view>
					</view>
					<view class="zises"
						style="margin-left: 20rpx;margin-top: 30rpx; display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
						<view style="width:100%;margin-bottom: 15rpx;">数量：</view>
						<view>
							<text class="grace-icons grace-form-icon"
								style="font-size: 40rpx;color: #fe2105;margin-inline: 20rpx;"
								v-on:click="reduceAmount">&#xe636;</text>
							<text
								style="padding-inline: 20rpx; line-height: 60rpx;border: 1rpx #f2f2f2 solid;border-radius: 5rpx;">{{order.amount}}</text>
							<text class="grace-icons icon-add2 grace-form-icon"
								style="font-size: 40rpx;color: #fe2105;margin-inline: 20rpx;"
								v-on:click="addAmount"></text>
						</view>
					</view>
					<view class="buttonv"
						style="margin-top: 50rpx; height: 100rpx;display: flex;justify-content:center;align-items:center;">
						<view
							style="border-radius: 30rpx; width: 700rpx; height: 80rpx; color: white;background-color: #fe2105; display: flex;justify-content:center;align-items:center;flex-wrap: wrap;">
							<text v-if="!isCollectCar">立即支付(¥328)</text>
							<text v-if="isCollectCar" @click="addProuctCar">加入购物车</text>
						</view>
					</view>
				</view>
			</template>
		</myBottomDialog>

	</view>
</template>

<script>
	import myBottomDialog from '../../graceUI/components/myBottomDialog.vue';
	import focusApi from "@/api/focus.js"
	import productApi from "@/api/product.js"
	import orderApi from "@/api/order.js"
	export default {
		components: {
			myBottomDialog
		},
		data() {
			return {
				attrIsShow: false,
				isCollectCar: false,
				productDetail: {},
				markers: null,
				productId: null,
				productTypes: [{
						typeId: 't1',
						label: '灰色',
						price: 145
					},
					{
						typeId: 't2',
						label: '军绿色',
						price: 145
					}
				],
				productSizes: [{
						code: '001',
						label: '小码'
					},
					{
						code: '002',
						label: '中码'
					}
				],
				order: {
					productId: '',
					productTypeId: '',
					productSizeCode: '',
					amount: 1
				}

			}
		},
		onLoad(options) {
			this.productId = options.productId
			this.order.productId = options.productId
			productApi.findById(options.productId).then(res => {
				console.log(res);
				this.productDetail = res;
				this.markers = [{
					id: 1,
					width: 40,
					height: 40,
					latitude: res.merchant.latitude,
					longitude: res.merchant.longitude,
					iconPath: 'https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/location.png'
				}]
			})

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toMerchant() {
				uni.navigateTo({
					url: "/pages/merchant/merchant?merchantId=" + this.productDetail.merchant.id
				})

			},
			toChat() {
				uni.navigateTo({
					url: "/pages/chat/chat?" + 'userId=' + this.productDetail.merchant.userId + '&userName=' + this
						.productDetail.merchant.merchantName
				})
			},
			enterMap() {
				uni.navigateTo({
					url: "/pages/map/map?merchantId=" + this.productDetail.merchant.id
				})
			},
			focusProduct() {
				uni.showLoading({
					title: '收藏...',
					icon: 'loading'
				});
				focusApi.add(this.productId, 'PRODUCT').then(res => {
					this.isFocus = true
					uni.showToast({
						title: '已收藏',
						icon: 'success',
						duration: 1500
					});
				}).catch(error => {
					uni.showToast({
						title: '收藏失败',
						icon: 'fail',
						duration: 1500
					});
				})
			},
			previewImage(path) {
				uni.previewImage({
					urls: [path]
				});
			},
			closeAttr() {
				this.attrIsShow = false
			},
			buyNow() {
				this.attrIsShow = true;
				this.isCollectCar = false
			},
			toCar() {
				this.attrIsShow = true;
				this.isCollectCar = true
			},
			toIndex() {
				console.log("toIndex")
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			chooseProductType(typeId) {
				this.order.productTypeId = typeId
			},
			chooseProductSize(code) {
				console.log(code)
				this.order.productSizeCode = code
			},
			addProuctCar() {
				uni.showLoading({
					title: '处理中...'
				})
				var that = this
				orderApi.add(this.order).then(res => {
					console.log(res)
					uni.showToast({
						title: '已加入',
						icon: 'success',
						duration: 1500
					}).then(res => {
						that.attrIsShow = false
					})
				}).catch(error => {
					uni.showToast({
						title: '加入失败',
						icon: 'fail',
						duration: 1500
					});

				});
			},
			reduceAmount() {
				let amount = this.order.amount
				if (amount > 0) {
					this.order.amount = amount - 1
				}
			},
			addAmount() {
				this.order.amount = this.order.amount + 1
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.product-type {
		margin-bottom: 20rpx;
		padding-inline: 20rpx;
		width: 400rpx;
		height: 50rpx;
		border: #f2f2f2 solid 1rpx;
		border-radius: 30rpx;
		color: #333333;
		display: flex;
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;
	}

	.selected-product-type {
		margin-bottom: 20rpx;
		padding-inline: 20rpx;
		width: 400rpx;
		height: 50rpx;
		border: #fe2105 solid 1rpx;
		border-radius: 30rpx;
		color: #333333;
		display: flex;
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;
	}

	.product-size {
		margin: 15rpx;
		width: 180rpx;
		height: 50rpx;
		border: #f2f2f2 solid 1rpx;
		border-radius: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.selected-product-size {
		margin: 15rpx;
		width: 180rpx;
		height: 50rpx;
		border: #fe2105 solid 1rpx;
		border-radius: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.grace-common-line {
		height: 16rpx;
	}

	.grace-product-padding {
		padding: 20rpx 25rpx;
	}

	.grace-product-title {
		line-height: 44rpx;
		font-size: 28rpx;
	}

	.grace-product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #FF7900;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.grace-product-collect {
		width: 40rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #ffb600;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.grace-product-share:after {
		width: 0;
		height: 0;
	}

	.grace-product-pathfinding {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #40afed;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.product-name {
		color: #545454;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.merchant-name {
		color: #545454;
		font-size: 28rpx;
		font-weight: bold;
	}

	.grace-product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.grace-product-info-img {
		width: 100%;
	}

	.grace-product-attr-info {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F1F1F3;
		padding-bottom: 26rpx;
	}

	.grace-product-attr-info-image {
		width: 120rpx;
		height: auto;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.grace-product-attr-info-body {
		width: 700rpx;
	}

	.grace-product-attr-info-title {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
		display: block;
	}

	.grace-product-attr-info-stone {
		width: 100%;
		font-size: 20rpx;
		margin-top: 8rpx;
		color: #666666;
		display: block;
	}

	.icon-close {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #888888;
	}

	/* 调整宫格大小 */
	.grace-grids-items {
		padding: 6rpx 0;
		width: 120rpx;
	}

	.grace-grids-icon {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 40rpx;
		color: #6B7375;
	}

	.grace-grids-text {
		line-height: 28rpx;
		font-size: 20rpx;
		margin-top: 2px;
		color: #6B7375;
	}

	.grace-footer-active {
		color: #FF0036;
	}

	.footer-buttonv {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>